<template>
	<u-modal v-model="internalShow" :title="title" :content="content" show-cancel-button confirm-color="#00C95B"
		@cancel="handleCancel" @confirm="handleConfirm">
		<template>
			<view class="text-warpper" v-if="type === 'text'">{{ content }}</view>
			<view class="input-wapper" v-if="type === 'input'">
				<input class="input" v-model="realContent" />
			</view>
		</template>
	</u-modal>
</template>

<script>
	export default {
		name: "base-modal",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: "text" // text-文本 input-输入框
			},
			title: {
				type: String,
				default: "提示"
			},
			content: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				internalShow: false,
				realContent: '',
			};
		},
		watch: {
			show: {
				handler(newVal) {
					this.internalShow = newVal;
					if (newVal) {
						// 当模态框显示时，重置输入框内容
						this.realContent = this.content;
					}
				},
				immediate: true,
				deep: true,
			},
			internalShow: {
				handler(newVal) {
					this.$emit("updateShow", newVal);
				},
				immediate: true,
				deep: true,
			},
			content: {
				handler(newVal) {
					this.realContent = newVal;
				},
				immediate: true,
				deep: true,
			}
		},
		methods: {
			handleCancel() {
				this.realContent = '';
				this.$emit("cancel");
			},
			handleConfirm() {
				this.$emit("confirm", this.realContent);
			}
		}
	};
</script>

<style lang="scss">
	/* 样式 */
	.text-warpper {
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input-wapper {
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.input {
			width: 500rpx;
			height: 73rpx;
			line-height: 73rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #F2F3F5;
			color: #010101;
			font-size: 30rpx;
			border-radius: 10rpx;
		}
	}
</style>